<template>
    <div class="container">
        <system-nav name="账户详情" :showBack="true"></system-nav>
        <div class="inner">
            <div class="detail-container">
                <div class="header-avatar">
                    <img :src="defaultUserface" v-real-img="userInfo.userface" />
                </div>
                <ul class="system-detail">
                    <li>
                        <div>
                            <label>姓名</label>
                            <span>{{ userInfo.username }}</span>
                        </div>
                        <div>
                            <label>性别</label>
                            <span>{{ userInfo.sex | formatSex }}</span>
                        </div>
                    </li>
                    <li>
                        <div>
                            <label>身份证号</label>
                            <span>{{ userInfo.idCard }}</span>
                        </div>
                        <div>
                            <label>手机号</label>
                            <span>{{ userInfo.phone }}</span>
                        </div>
                    </li>
                    <li>
                        <div>
                            <label>民族</label>
                            <span>{{ userInfo.national }}</span>
                        </div>
                        <div>
                            <label>政治面貌</label>
                            <span>{{ userInfo.political }}</span>
                        </div>
                    </li>
                    <li>
                        <div>
                            <label>文化程度</label>
                            <span>{{ userInfo.cultural }}</span>
                        </div>
                        <div>
                            <label>职业</label>
                            <span>{{ userInfo.job }}</span>
                        </div>
                    </li>
                </ul>
                <Button class="btn-back" type="primary" @click="goBack" ghost>返回</Button>
            </div>   
        </div>
    </div>
</template>

<script>
import SystemNav from '@/components/SystemNav'
import mixin from '@/mixins'
import { FileURL } from '@/common/apis/config'
import { viewAccountRest } from '@/common/apis/system'
import { defaultUserface } from '@/common/utils/const'

export default {
    name: 'accountDetail',
    mixins: [mixin],
    components: {
        SystemNav
    },
    data() {
        return {
            defaultUserface,
            userInfo: {}
        }
    },
    mounted() {
        this.id = this.$route.params.id
        this.initData()
    },
    methods: {
        initData() {
            viewAccountRest(this.id).then(result => {
                const data = result.data.content
                this.userInfo = {
                    ...data,
                    userface: FileURL + data.userface
                }
            })
        }
    }
}
</script>
